sidebar-animate-speed = 0.5s
sidebarFontColorHover = grey
borderWhenActive= 5px
spacingInsideMenu = 40px

.sidebar
  background-color var(--sidebarColor)
  transition all sidebar-animate-speed
  width sidebarWidth
  min-width sidebarWidth
  z-index 20
  display flex
  flex-direction column
  height 100vh
  overflow-x auto
  position sticky
  top 0px
  &__header
    height headerHeight
    min-height headerHeight
    display flex
    justify-content center
    align-items center
    background-color var(--sidebarLogoColor)
    &__expand
      color var(--sidebarFontColor)
      padding standardSpacing
      transition all sidebar-animate-speed
      &:hover
        color sidebarFontColorHover
    & .tracimLogo
      flex 1
      text-align center
  &__search
    padding standardSpacing
    & > .search
      padding textSpacing standardSpacing
      box-shadow 0px 0px 20px 0px var(--sidebarColorDarken)
    & > .sidebar__item
      display none
  &__item
    display flex
    align-items center
    color var(--sidebarFontColor)
    white-space nowrap
    overflow hidden
    width 100%
    height 40px
    min-height 40px
    padding-inline-start borderWhenActive
    &__inside_menu
      padding-inline-start spacingInsideMenu
    &__unread
      font-weight bold
    &:hover
      background-color var(--sidebarColorDarken)
      color var(--sidebarFontColor)
    &__current
      padding-inline-start 0
      border-inline-start-style solid
      border-inline-start-width borderWhenActive
      font-weight bold
      &.sidebar__item__inside_menu
        padding-inline-start spacingInsideMenu - borderWhenActive
      &.sidebar__item__space
        padding-inline-start standardSpacing
      &.sidebar__search
        padding-inline-start textSpacing
    &__name
      align-items center
      display inline-flex
      padding standardSpacing
      width 100%
      & .label
        overflow hidden
        text-overflow ellipsis
        unicode-bidi plaintext
      & > span
        display flex
        align-items center
        padding-inline-start standardSpacing
    &__space
      display flex
      padding-inline-start standardSpacing + borderWhenActive
      align-items center
      &__type
        padding-inline-start textSpacing
        color grey
        flex 1
        text-align end
      & > *
        color var(--sidebarFontColor)
      &:hover
        background-color var(--sidebarColorDarken)
    &__withoutChildren
      padding-inline-start standardSpacing * 3
    &__foldChildren
      height 100%
      padding-inline-end 0
      padding-inline-start 0
      &:hover
        background-color transparent
        & > .iconbutton__icon
          color sidebarFontColorHover
    &__dragNdrop
      margin-inline-start textSpacing
    &__menu
      &__element *
        color fontColor
      &.dropdownMenuButton
        & i
          width auto
          color var(--sidebarFontColor)
          &:hover
            color sidebarFontColorHover
        &:focus
          outline none
        &::after
          display none
  &__title
    font-weight bold
    background-color var(--sidebarColorDarken)
    overflow visible
    &__button
      display flex
      color var(--sidebarFontColor)
      font-weight bold
      padding-inline-start standardSpacing
      align-items center
      flex 1
      height 100%
      &:hover > i
        color sidebarFontColorHover
      & > span
        padding-inline-start standardSpacing
        display flex
        align-items center
      &__create, &__join
        padding-inline-start standardSpacing
        padding-inline-end standardSpacing
        color var(--sidebarFontColor)
        height 100%
        &:hover
          color sidebarFontColorHover
  &__spaces
    overflow-y auto
    min-height 230px // INFO - G.B. - 2022-08-30 - Min height to show full dropdown menu
    &__empty
      color darkGrey1
      text-align center
  &__mention
    background-color errorRed
    border-radius 50%
    font-size metadataFontSize
    font-weight bold
    line-height mentionCircleSize
    margin-inline-start textSpacing
    min-width mentionCircleSize
    display flex
    align-items center
    justify-content center
    color offWhite
  &__notification
    height notificationCircleSize
    width notificationCircleSize
    border-radius 50%
    background-color lightBlue
    margin-inline-start textSpacing
  &__footer
    margin-top auto
    margin-bottom standardSpacing
    display flex
    flex-direction column
    &__text
      color sidebarFontColorHover
      font-size metadataFontSize
      margin 0 auto
      display flex
      &__link
        & > a
          color sidebarFontColorHover
          font-size metadataFontSize
          margin-inline-start textSpacing
          &:hover
            text-decoration underline
  &__emptyZone
    flex 1

// INFO - GB - 2022-07-26 - Closed sidebar
.sidebar
  &.sidebarClose
    width closedSidebarWidth
    min-width closedSidebarWidth
    & .sidebar__header
      & .tracimLogo
        display none
    & .sidebar__search
      padding 0
      & > .search
        display none
      & > .sidebar__item
        display flex
    & .sidebar__item
      justify-content center
      padding-inline-end borderWhenActive
      padding-inline-start borderWhenActive
      & > span
        display none
      &__name
        justify-content center
        & > span
          display none
        & .sidebar__mention, .sidebar__notification
          font-size 0
          min-width wallCircleSize
          width wallCircleSize
          height wallCircleSize
          position absolute
          margin-inline-start 25px
      &__foldChildren
        display none
      &__menu
        display none
    & .sidebar__item__current
      padding-inline-start 0
    & .sidebar__spaces
      display none
    & .sidebar__footer
      & .iconbutton__label, .iconbutton__label-mobile
        display none
      & .sidebar__footer__text
        display none
    & .sidebar__title__button
      justify-content center
      & > span
        display none
      &__create
        display none
      &__join
        display none

[dir=rtl] .sidebar.sidebarClose .sidebar__notification
  right 15px

// INFO - GB - 2022-07-26 - Icon colors
.sidebar__search__item i
  color sidebarSearchItem
.sidebar__activities__item i
  color sidebarActivitiesItem
.sidebar__notification__item i
  color sidebarNotificationItem
.sidebar__tasks__item i
  color sidebarTasksItem
.sidebar__favorites__item i
  color sidebarFavoritesItem

@media (max-width: max-lg)
  .sidebar
    min-height 100%

@media (max-width: max-sm)
  .sidebar
    min-width 100%
